<template>
  <view class="centerContainer">
    <!-- 头部 -->
    <view class="header">
      <image class="headerImg" :src="userInfo.avatarUrl" mode=""></image>
      <text class="headerText">{{userInfo.nickName}}</text>
      <text @click="logout" class="logout">退出登录</text>
      <i class="iconfont icon-arrow-right headerIcon" ></i>
    </view>
    
    <!-- 图标 -->
    <view class="centerList">
    	<view class="centerItem">
    		<i class="iconfont icon-huangguan1 centerIcon"></i>
    		<text class="itemText">桌员认证</text>
    	</view>
      <view class="centerItem">
      	<i class="iconfont icon-huangguan1 centerIcon"></i>
      	<text class="itemText">桌长认证</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-huangguan1 centerIcon"></i>
      	<text class="itemText">大桌长认证</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-cha centerIcon"></i>
      	<text class="itemText">茶桌会认证</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-shangjiarenzheng centerIcon"></i>
      	<text class="itemText">商家买手认证</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-huiyuan centerIcon"></i>
      	<text class="itemText">品牌商认证</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-wodexunzhang centerIcon"></i>
      	<text class="itemText">品牌入库</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-quanbudingdan centerIcon"></i>
      	<text class="itemText">我的订单</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-huangguan centerIcon"></i>
      	<text class="itemText">我的茶桌会</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-huangguan centerIcon"></i>
      	<text class="itemText">草稿的茶桌会</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-ico centerIcon"></i>
      	<text class="itemText">我的行程</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-xueshengdushu centerIcon"></i>
      	<text class="itemText">我的课程</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-quan centerIcon"></i>
      	<text class="itemText">我的优惠券</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-dadou centerIcon"></i>
      	<text class="itemText">我的T豆</text>
      </view>
      <view class="centerItem">
      	<i class="iconfont icon-hezuo centerIcon"></i>
      	<text class="itemText">卖茶找茶</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: uni.getStorageSync('userInfo') || {}
      };
    },
    methods:{
      logout(){
        uni.switchTab({
          url:'/pages/index/index',
          success : () => {
            uni.showToast({
              title: '退出登录成功',
              icon: 'success',
              duration: 2000,
            })
            uni.removeStorageSync('userInfo')
            this.userInfo = {}
          }
        })
      }
    },
    mounted(){
      this.userInfo = uni.getStorageSync('userInfo')
      console.log(this.userInfo,'@@');
    },
    onShow(){
      if(!this.userInfo.nickName){
        uni.redirectTo({
          url:'/pages/login/login'
        })
      }
    }
  }
</script>

<style lang="stylus">
.centerContainer
  height: 1070upx
  background-color: #ddd
  .header
    width: 100%
    height: 240upx
    background-color: #00974A
    .headerImg
      width: 140upx
      height: 140upx
      margin: 60upx 0 0 30upx
    .logout
      position: absolute
      top: 30upx
      right: 30upx
      font-size: 30upx
      color: red
    .headerText
      position: absolute
      color: #fff
      left: 200upx
      top: 80upx
    .headerIcon
      position: absolute
      top: 100upx
      right: 20upx
  .centerList
    display: flex
    flex-wrap: wrap
    .centerItem
      width: 21%
      display: flex
      background-color: #fff
      flex-direction: column
      align-items: center
      margin: 24upx 0 0 24upx
      position: relative
      height: 160upx
      .centerIcon
        width: 110upx
        height: 70upx
        margin: 30upx 10upx 0 20upx
        padding-left: 40upx
      .itemText
        font-size: 28upx
        color: #666
        text-align: top
</style>
